<template>
  <div class="category-tab">
    <me-scroll :scrollbar="false">
      <div class="tab-item border-bottom"
        :class="{'tab-item-active':curId === item.id}"
        v-for="(item,index) of categoryNames"
        :key="index"
        @click="showRightContent(item.id)">{{item.name}}
      </div>
    </me-scroll>
</div>
</template>
<script>
import { categoryNames } from './config'
import meScroll from '@/base/me-scroll'
export default {
  name: 'categoryTab',
  components: {
    meScroll
  },
  data () {
    return {
      curId: categoryNames[0].id
    }
  },
  created () {
    this.categoryNames = categoryNames
    this.$emit('showRightContent', this.curId)
  },
  methods: {
    showRightContent (id) {
      if (this.curId === id) {
        return
      }
      this.curId = id
      this.$emit('showRightContent', id)
    }
  }
}
</script>
<style lang="stylus" scoped>
.category-tab
  width 100%
  height 100%
  background #fff
  .tab-item
    height 40px
    line-height 40px
    font-size 18px
    font-weight bold
    text-align center
    &.tab-item-active
      color red
</style>
